<template>
  <div class="search">
    <mt-search v-model="userKey" cancel-text="取消" placeholder="搜索"></mt-search>
    <mt-button size="normal" type="primary" @click="doSearch">搜索</mt-button>
    <div class="searchHistory">
      <mt-cell :title="item" :to="'/searchList/'+item" v-for="(item,index) in historyData" :key="index">
        <span style="color: green" @click.prevent.stop="delData(index)">x</span>
      </mt-cell>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      userKey: '',
      historyData: []
    }
  },
  //   页面一打开就自动加载搜索历史记录
  mounted () {
    this.historyData = this.getHistoryData()
  },
  methods: {
    //   获取本地存储的历史数据
    getHistoryData () {
      // 字符串
      var dataStr = localStorage.getItem('lt_historyData')
      //   返回数据,记得转换类型
      // 因为有可能一开始的时候并没有这个本地存储数据，为了避免后期的错误，返回一个空值数组
      return JSON.parse(dataStr || '[]')
    },
    // 单击搜索处理函数
    doSearch () {
    //    将当前数据添加到本地存储
      if (this.userKey.trim().length !== 0) {
        //   获取原始的本地存储数据--数组
        var dataArr = this.getHistoryData()
        // 将当前用户搜索关键字添加到数组
        dataArr.push(this.userKey)
        // 将数据重新写入本地存储
        localStorage.setItem('lt_historyData', JSON.stringify(dataArr))
      }
      //   实现路由跳转,记得带参数
      // 1.使用name  对应params
      //   this.$router.push({name: 'SearchList', params: {key: this.userKeys}})
      this.$router.push({path: `SearchList/${this.userKey}`})
      // 2.使用path   对应query
    //   this.$router.push({path: 'searchList', query: {key: this.userKeys}})
    },
    delData (index) {
      // 获取 数据
      var dataArr = this.getHistoryData()
      /* 删除数据 */
      dataArr.splice(index, 1)
      // 将数据重新写入本地存储
      localStorage.setItem('lt_historyData', JSON.stringify(dataArr))
      //  实现刷新(注意这里点击删除按钮时,会与超链接存在点透情况,需要阻止事件冒泡阻止默认行为)
      this.historyData = this.getHistoryData()
    }
  }

}
</script>
<style lang="scss" scoped>
.search {
  position: relative;
  .mint-search {
    height: auto;
  }
  .mint-button {
    position: absolute;
    height: 28px;
    top: 8px;
    right: 10px;
    z-index: 998;
    font-size: 14px;
    border-radius: 0 4px 4px 0;
  }
}
</style>
